<template>
  <div class="navmenu">
    <div v-for="item in menuList" :key="item.id" @click="handleLink(item.link)"  :style="item.id == 1?obj:''">
        <img :src="item.imgUrl" v-if="isShow">
        <p style="text-align:center">{{item.title}}</p>
    </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            isShow:false,
            obj:{
                borderBottom:'3px solid grey',
            }
        }
    },
    props:{
        menuList:Array,
        link:String,
    },
    beforeDestroy(){
        window.removeEventListener("scroll",this.handleScroll)
    },
    mounted() {//可以在这里面直接进行滚动条的获取
        window.addEventListener('scroll', this.handleScroll)
    },
    methods:{
        handleScroll() {
        this.$nextTick(()=>{
                var top = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset
                // console.log(top)//获取到的当前滚动条的高度
                if(top > 300){
                    this.isShow = true
                    // console.log('好想你')
                }else{
                    this.isShow = false
                }
            })
        },
        handleLink(path){
            if(path == '/huawei') return
            this.$router.push(path)
        }
    }
    }
</script>

<style scoped>
    .navmenu{
        z-index:999;
        width:100%;
        position:fixed;
        top: 67px;
        background-color: white;
        display: flex;
        justify-content: center;
        box-shadow: 0 2px 2px rgb(220, 220, 220);
    }
    .navmenu div{
        cursor: pointer;
        margin: 10px 30px;
        position:relative;
    }
    .navmenu div:first-child:hover:after{
        width: 0;
    }
    .navmenu div:hover::after{
        width: 100%;
    }
    .navmenu div::after{
        content:"";
        position:absolute;
        bottom:0;
        left:0;
        width:0;
        height:3px;
        background-color:#6e6c6c;
        transition:all ease-out 0.3s;
    }
    img{
        width: 65px;
    }





</style>